<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.min.css";

export default {
  name: "Swiper",
  props: {
    // 上一张 / 下一张 按钮是否自定义，值为false,自定义无效
  },

  mounted() {
    let navigation = {
      prevEl: this.btnCustom ? ".button-prev" : ".swiper-button-prev",
      nextEl: this.btnCustom ? ".button-next" : ".swiper-button-next",
    };
    new Swiper(".swiper-container", {
      loop: true,
      loopAdditionalSlides: 1,
      autoplay: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation,
    });
  },
};
</script>

<style>
/* 以下为自定义btn按钮的样式 */
.custom-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
}

.button-prev {
  left: 0;
}

.button-next {
  right: 0;
}
</style>
